// 混合的模式匹配
// 将混合拆分成多个部分：必须部分和选择部分
// 混合的必须部分有一个参数 @xxx
// 混合的选择部分 传入一标识符去匹配

.mixin1(@_){// 必须部分
    width: 400px;
    height: 100px;
}
.mixin1(bgc1){// 选择部分
    background-color: lightblue;
}
.mixin1(bgc2){// 选择部分
    background-color: lightgreen;
}
.mixin1(bgc3){// 选择部分
    background-color: lightpink;
}

.box1{
    .mixin1(bgc1);
}
.box2{
    .mixin1(bgc3);
}


// 混合的守卫
// 简单讲，给混合设置生效条件，符号条件则对应的样式生效
.mixin2(@num){// 无守卫的混合
    width: @num;
    height: 50px;
    background-color: lightblue;
}
.box3{
    .mixin2(300px);
}

.mixin3(@num) when(@num=10){// 有守卫的混合
    width: @num * 20px;
    height: 50px;
    background-color: lightsalmon;
}
.mixin3(@num) when(@num>=10){// 有守卫的混合
    width: @num * 20px;
    height: 50px;
    background-color: lightgreen;
}

// 逻辑与 使用 and 添加多个条件
.mixin3(@num) when(@num<=10) and (@num>=6){// 有守卫的混合
    width: @num * 20px;
    height: 50px;
    background-color: lightpink;
}

// 逻辑或 使用 , 添加多个条件
.mixin3(@num) when(@num<=10),(@num>=100){// 有守卫的混合
    width: @num * 20px;
    height: 50px;
    background-color: lightpink;
}

// 逻辑非 使用 not 添加条件
.mixin3(@num) when not (@num=99){// 有守卫的混合
    border: 5px solid yellow;
}
.box4{
    .mixin3(99);
    color: red;
}